<template>
  <div
    class="c-item"
    :class="{ active: selectedDivider === type }"
    @click="updateDivider(type)"
  >
    <i
      class="lib-item__icon iconfont"
      :class="{
        'icon-divider-v': type === 'v',
        'icon-divider-h': type === 'h',
      }"
    />
    <div class="lib-item__title">
      <slot />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'VDivider',
  props: {
    type: {
      type: String,
      default: '', // v or h
    },
  },
  computed: {
    ...mapState(['selectedDivider']),
  },
  methods: {
    ...mapMutations(['updateDivider']),
  },
}
</script>
